<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vtable.js"></script>
  <style>

  </style>
</head>

<body>
  <a href="https://codesandbox.io/s/vtable-page-t3r63p">参考地址</a>
  <div id="container" style="width: 1600px; height: 460px;"></div>
  <div>
    <button id="prev-buttom">prev</button>
    <span id="page-namber">1</span>
    <button id="next-buttom">next</button>
  </div>

  <script>
    window.onload = function () {
      const generatePersons = (count) => {
        return Array.from(new Array(count)).map((_, i) => ({
          id: i + 1,
          email1: `${i + 1}@xxx.com`,
          name: `小明${i + 1}`,
          lastName: "王",
          date1: "2022年9月1日",
          tel: "000-0000-0000",
          sex: i % 2 === 0 ? "boy" : "girl",
          work: i % 2 === 0 ? "back-end engineer" : "front-end engineer",
          city: "beijing"
        }));
      };
      const records = generatePersons(100);

      const columns = [
        {
          field: "id",
          title: "ID ff",
          width: "1%",
          minWidth: 200,
          sort: true
        },
        {
          field: "email1",
          title: "email",
          width: 200,
          sort: true
        },
        {
          field: "date1",
          title: "birthday",
          width: 200
        },
        {
          field: "sex",
          title: "sex",
          width: 100
        },
        {
          field: "tel",
          title: "telephone",
          width: 150
        },
        {
          field: "work",
          title: "job",
          width: 200
        },
        {
          field: "city",
          title: "city",
          width: 150
        }
      ];

      const option = {
        records,
        columns,
        pagination: {
          perPageCount: 10,
          currentPage: 1
        }
      };

      const table = new VTable.ListTable(document.getElementById("container"), option);

      let pageNumber = 1;
      const pageNumberSpan = document.getElementById("page-namber");
      document.getElementById("prev-buttom").addEventListener("click", () => {
        if (pageNumber === 0) {
          return;
        }
        pageNumber--;
        table.updatePagination({
          currentPage: pageNumber
        });
        pageNumberSpan.innerHTML = pageNumber;
      });

      document.getElementById("next-buttom").addEventListener("click", () => {
        if (pageNumber === 9) {
          return;
        }
        pageNumber++;
        table.updatePagination({
          currentPage: pageNumber
        });
        pageNumberSpan.innerHTML = pageNumber;
      });


    }
  </script>
</body>

</html>